<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="central.css" type="text/css"/>
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
	<script src="http://malsup.github.com/jquery.form.js"></script> 
	<!--[if lte IE 7]>
	<link rel="stylesheet" href="yaml/core/iehacks.min.css" type="text/css"/>
	<![endif]-->
	<title>Minecraft - Memory</title>
	<script>
		$('.openPopup').live("click", function() {
			$('.Popup').fadeIn("slow");
			$('#overlay').fadeIn("slow");
			return false;
		});
		$('.closePopup').live("click", function() {
			var form = document.getElementById("spielerForm");
			var textS1 = document.getElementById("spieler1");
			var textS2 = document.getElementById("spieler2");
			textS1.innerHTML = form.name1.value;
			textS2.innerHTML = form.name2.value;
			$(".Popup").fadeOut("slow");
			$("#overlay").fadeOut("slow");
			return false;
		});
	</script>
</head>
<body>
	<script type="text/javascript">
	if (window.addEventListener) { // Mozilla, Netscape, Firefox
		window.addEventListener('load', WindowLoad, false);
	} else if (window.attachEvent) { // IE
		window.attachEvent('onload', WindowLoad);
	}

	function WindowLoad(event) {
		$('.Popup').fadeIn("slow");
			$('#overlay').fadeIn("slow");
			return false;
	}
	</script>

	
	<div class="Popup">
		<h1>Enter your names:</h1>
		<form id="spielerForm" method="post"> 
			Player 1: <input type="text" id="formname1" name="name1" /> 
			Player 2: <input type="text" id="formname2" name="name2" /> 
		</form>
		<a id="formlink" href="" class="closePopup">Save</a>
	</div>
	<div id="overlay" class="closePopup"></div>
	
	
	
  <div class="ym-wrapper">
    <div class="ym-wbox">
		<header>
		<div class="ym-grid ym-equalize">
				<div id="head1" class="ym-g25 ym-gl">
					<div id="p1" class="ym-gbox">
					  <p id="spieler1"></p>
					</div>
					 <div class="ym-gbox">
					  <p id="punkte1">0</p>
					</div>
					
				</div>
				<div id="head2" class="ym-g50 ym-gl">
					<img id="headerpic" src="pics/header.png">
				</div>
				<div id="head3" class="ym-g25 ym-gr">
					<div id="p2" class="ym-gbox">
					  <p id="spieler2"></p>
					</div>
					 <div class="ym-gbox">
					  <p id="punkte2">0</p>
					</div>
				</div>
			</div>	
		
		</header>
    </div>
	<div id="row1" class="ym-grid linearize-level-1">
		<div class="ym-g50 ym-gl">
			<div class="ym-grid">
				<div id="k1" class="ym-g25 ym-gl">
				
				</div>
				<div id="k2" class="ym-g25 ym-gl">
				
				</div>
				<div id="k3" class="ym-g25 ym-gl">
					
				</div>
				<div id="k4" class="ym-g25 ym-gr">
			
				</div>
			</div>
		</div>
		<div class="ym-g50 ym-gr">
			<div class="ym-grid">
				<div id="k5" class="ym-g25 ym-gl">
				
				</div>
				<div id="k6" class="ym-g25 ym-gl">
					
				</div>
				<div id="k7"class="ym-g25 ym-gl">
				
				</div>
				<div id="k8" class="ym-g25 ym-gr">
					
				</div>
			</div>
		</div>
	</div>
	<div id="row2" class="ym-grid linearize-level-1">
		<div class="ym-g50 ym-gl">
			<div class="ym-grid">
				<div id="k9" class="ym-g25 ym-gl">
					
				</div>
				<div id="k10" class="ym-g25 ym-gl">
					
				</div>
				<div id="k11" class="ym-g25 ym-gl">
					
				</div>
				<div id="k12" class="ym-g25 ym-gr">
			
				</div>
			</div>
		</div>
		<div class="ym-g50 ym-gr">
			<div class="ym-grid">
				<div id="k13" class="ym-g25 ym-gl">
				
				</div>
				<div id="k14" class="ym-g25 ym-gl">
					
				</div>
				<div id="k15"class="ym-g25 ym-gl">
				
				</div>
				<div id="k16" class="ym-g25 ym-gr">
					
				</div>
			</div>
		</div>
	</div>
	<div id="row3" class="ym-grid linearize-level-1">
		<div class="ym-g50 ym-gl">
			<div class="ym-grid">
				<div id="k17" class="ym-g25 ym-gl">
					
				</div>
				<div id="k18" class="ym-g25 ym-gl">
				
				</div>
				<div id="k19" class="ym-g25 ym-gl">
						
				</div>
				<div id="k20" class="ym-g25 ym-gr">
			
				</div>
			</div>
		</div>
		<div class="ym-g50 ym-gr">
			<div class="ym-grid">
				<div id="k21" class="ym-g25 ym-gl">
				
				</div>
				<div id="k22" class="ym-g25 ym-gl">
					
				</div>
				<div id="k23"class="ym-g25 ym-gl">
				
				</div>
				<div id="k24" class="ym-g25 ym-gr">
					
				</div>
			</div>
		</div>
	</div>
	<div id="row4" class="ym-grid linearize-level-1">
		<div class="ym-g50 ym-gl">
			<div class="ym-grid">
				<div id="k25" class="ym-g25 ym-gl">
					
				</div>
				<div id="k26" class="ym-g25 ym-gl">
				
				</div>
				<div id="k27" class="ym-g25 ym-gl">
					
				</div>
				<div id="k28" class="ym-g25 ym-gr">
			
				</div>
			</div>
		</div>
		<div class="ym-g50 ym-gr">
			<div class="ym-grid">
				<div id="k29" class="ym-g25 ym-gl">
				
				</div>
				<div id="k30" class="ym-g25 ym-gl">
					
				</div>
				<div id="k31"class="ym-g25 ym-gl">
				
				</div>
				<div id="k32" class="ym-g25 ym-gr">
					
				</div>
			</div>
		</div>
	</div>
	<div id="row5" class="ym-grid linearize-level-1">
		<div class="ym-g50 ym-gl">
			<div class="ym-grid">
				<div id="k33" class="ym-g25 ym-gl">
					
				</div>
				<div id="k34" class="ym-g25 ym-gl">
				
				</div>
				<div id="k35" class="ym-g25 ym-gl">
					
				</div>
				<div id="k36" class="ym-g25 ym-gr">
			
				</div>
			</div>
		</div>
		<div class="ym-g50 ym-gr">
			<div class="ym-grid">
				<div id="k37" class="ym-g25 ym-gl">
				
				</div>
				<div id="k38" class="ym-g25 ym-gl">
					
				</div>
				<div id="k39"class="ym-g25 ym-gl">
				
				</div>
				<div id="k40" class="ym-g25 ym-gr">
					
				</div>
			</div>
		</div>
	</div>
	<div id="row6" class="ym-grid linearize-level-1">
		<div class="ym-g50 ym-gl">
			<div class="ym-grid">
				<div id="k41" class="ym-g25 ym-gl">
					
				</div>
				<div id="k42" class="ym-g25 ym-gl">
				
				</div>
				<div id="k43" class="ym-g25 ym-gl">
					
				</div>
				<div id="k44" class="ym-g25 ym-gr">
			
				</div>
			</div>
		</div>
		<div class="ym-g50 ym-gr">
			<div class="ym-grid">
				<div id="k45" class="ym-g25 ym-gl">
				
				</div>
				<div id="k46" class="ym-g25 ym-gl">
					
				</div>
				<div id="k47"class="ym-g25 ym-gl">
				
				</div>
				<div id="k48" class="ym-g25 ym-gr">
					
				</div>
			</div>
		</div>
	</div>
  </div>
  <script>
	for(var i = 1; i <= 48; i++){
		var element = document.getElementById("k" + i);
		element.innerHTML = '<div class="karte zugedeckt"><img class="kartepic" src="./pics/logo.png"></div>';
	}
  </script>
</body>
</html>